<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>add one product</h2>
    <form @submit.prevent="addProduct">
      <table>
        <tr>
          <td>
            CategoryId:
          </td>
          <td>
            <input type="text" name="categoryId" id="categoryId" v-model="product.categoryId" />
          </td>
        </tr>
        <tr>
          <td>
            ProductId:
          </td>
          <td>
            <input type="text" name="productId" id="productId" v-model="product.productId" />
          </td>
        </tr>
        <tr>
          <td>
            Name:
          </td>
          <td>
            <input type="text" name="name" id="name" v-model="product.name" />
          </td>
        </tr>
        <tr>
          <td>
            Description:
          </td>
          <td>
            <input type="text" name="description" id="description" v-model="product.description" />
          </td>
        </tr>
        <tr>
          <td>
            Image:
          </td>
          <td>
            <input type="file" name="file" id="file" @change="uploadImage" />
            <input type="text" name="file1" id="file1" v-model="product.image" style="display: none" />
          </td>
        </tr>
      </table>
      <p align="center">
        <input name="editProduct" type="submit" value="Save" />
      </p>
    </form>
  </div>
</template>

<script>
import FooterComponent from "@/views/common/footer.vue";
import HeaderComponent from "@/views/common/header.vue";

export default {
  components: {HeaderComponent, FooterComponent},
  data() {
    return {
      product: {
        categoryId: '',
        productId: '',
        name: '',
        description: '',
        image: '',
      },
    };
  },
  methods: {
    uploadImage(event) {
      const file = event.target.files[0];
      const cosInstance = new cos({
        SecretId: 'AKIDZAiNFEMl6RgqrsTE1rbfq0gQAsdAzm0D',
        SecretKey: 'Rx0HYsTD3PuZgvcVQTjHrZLAwkaSrCHJ',
      });
      cosInstance.uploadFile({
        Bucket: 'red3and-1325710075',
        Region: 'ap-nanjing',
        Key: file.name,
        Body: file,
        SliceSize: 1024 * 1024 * 5,
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData));
        },
      });
      const url = cosInstance.getObjectUrl({
        Bucket: 'red3and-1325710075',
        Region: 'ap-nanjing',
        Key: file.name,
        Sign: false,
      });
      this.product.image = url;
    },
    addProduct() {
      // Perform the add product action here.
      // Replace this with your own method.
      console.log(this.product);
    },
  },
};
</script>
<FooterComponent/>
<style scoped>
@import "@/assets/css/myAccount.css";
</style>